<template>
  <div style="padding: 20px 20px 0px 20px">
    <!--      头部-->
    <div>
      <el-form :inline="true" :model="storeInput" class="demo-form-inline">
        <span style="font-size: 35px">店铺管理</span>
        <el-form-item style="float: right;margin-top: 8px">
          <el-button type="primary" @click="add = true">添加店铺</el-button>
        </el-form-item>
        <el-form-item style="float: right;margin-top: 8px">
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>

        <el-form-item style="float: right;margin-top: 8px">
          <el-input v-model="storeInput.name" placeholder="店铺名称"></el-input>
        </el-form-item>

        <el-select v-model="storeInput.status" placeholder="店铺状态" clearable
                   style="float: right;margin-top: 8px; margin-right: 10px">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form>
    </div>
<!--    表格-->
    <el-table
        :data="storeData"
        style="width: 100%;"
        :show-overflow-tooltip="false"
        height="792"
        :border="true"
    >
      <el-table-column
          prop="uname" label="用户" :show-overflow-tooltip="true">
      </el-table-column>

      <el-table-column prop="name" label="名称" :show-overflow-tooltip="true"></el-table-column>

      <el-table-column prop="contacts" label="联系人" :show-overflow-tooltip="true"></el-table-column>

      <el-table-column prop="mobile" label="电话" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="saddress" label="区域" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="site" label="详细地址" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column
          prop="img" label="店铺图片" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
          prop="imglist" label="图片列表" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column prop="level" label="等级" :show-overflow-tooltip="true"></el-table-column>

      <el-table-column prop="startTime" label="开店时间" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="endTime" label="关店时间" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="transportFee" label="运费" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="status" label="状态" :show-overflow-tooltip="true" :formatter="status">
      </el-table-column>
      <el-table-column prop="withdrawalProfit" label="可提现" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="frozenProfit" label="冻结" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="totalProfit" label="已提现" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">修改</el-button>
<!--          <el-button-->
<!--              size="mini"-->
<!--              @click="handleEdit(scope.$index, scope.row)">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>
<!--    添加-->
    <el-dialog
        :visible.sync="add"
        width="30%"
        :before-close="addDataClose"
        style="text-align: center">
      <el-form label-width="80px" :model="addData">
        <el-form-item label="用户">
          <el-input v-model="addData.mobile" placeholder="用户电话" ></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="addData.name" placeholder="店铺名称" ></el-input>
        </el-form-item>
        <el-form-item label="图片" style="text-align: left">
          <el-upload
              list-type="picture-card"
              action="http://8.136.105.10:8081/putImg"
              :show-file-list="false"
              :on-success="handleAvatarSuccess">
            <i class="el-icon-plus" v-if="imgShow"></i>
            <img width="100%" height="100%" :src="addData.img" v-if="!imgShow">
          </el-upload>
        </el-form-item>
        <el-form-item label="图片组" style="text-align: left">
          <el-upload
              action="http://8.136.105.10:8081/putImg"
              list-type="picture-card"
              :on-success="handleSuccess"
              :on-remove="handleRemove"
              :file-list="imgLists"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="联系">
          <el-input v-model="addData.user" placeholder="联系人名称" ></el-input>
        </el-form-item>

        <el-form-item label="电话">
          <el-input v-model="addData.umobile" placeholder="联系电话"></el-input>
        </el-form-item>

        <el-form-item label="运费">
          <el-input v-model="addData.transportFee" placeholder="店铺运费"></el-input>
        </el-form-item>
        <el-form-item label="区域">
          <el-input v-model="addData.saddress" placeholder="店铺地址"></el-input>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="addData.address" placeholder="店铺地址"></el-input>
        </el-form-item>
        <el-form-item label="营业时间">
          <el-time-picker placeholder="早" value-format="HH:mm:ss" v-model="addData.startTime" style="width: 45%;"></el-time-picker>
          ==
          <el-time-picker placeholder="晚" value-format="HH:mm:ss" TimePicker v-model="addData.endTime" style="width: 45%;"></el-time-picker>
        </el-form-item>

        <el-form-item label="简介">
          <el-input v-model="addData.content" placeholder="店铺介绍" type="textarea"></el-input>
        </el-form-item>
        <el-button type="primary" plain
                   style="width: 150px;height: 50px ;font-size: 25px;"
                   @click="addStore">添加店铺</el-button>

      </el-form>

    </el-dialog>

<!--    修改-->
    <el-dialog
        :visible.sync="alter"
        width="30%"
        :before-close="alterClose"
        style="text-align: center"
    >
      <el-form label-width="80px" :model="alterData">
        <el-form-item label="用户">
          <el-input v-model="alterData.uname" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="店铺名称">
          <el-input v-model="alterData.name"></el-input>
        </el-form-item>
        <el-form-item label="店铺图标">
          <el-upload
              class="avatar-uploader"
              action="http://192.168.110.147:8081/putImg"
              :show-file-list="false"
              :on-success="avatarSuccess"
              style="text-align: left"
          >
            <img  :src="img()" class="avatar" style="width: 100px;height: 100px">
          </el-upload>
        </el-form-item>
        <el-form-item label="店铺图片">
          <el-row>
            <el-col :span="8">
              <el-upload
                  class="avatar-uploader"
                  action="http://192.168.110.147:8081/putImg"
                  :show-file-list="false"
                  :on-success="handleSuccess0"
              >
                <img  :src="imgList[0]" class="avatar" style="width: 100px;height: 100px">
              </el-upload>
            </el-col >
            <el-col :span="8">
              <el-upload
                  class="avatar-uploader"
                  action="http://192.168.110.147:8081/putImg"
                  :show-file-list="false"
                  :on-success="handleSuccess1"
              >
                <img  :src="imgList[1]" class="avatar" style="width: 100px;height: 100px">
              </el-upload>
            </el-col >
            <el-col :span="8">
              <el-upload
                  class="avatar-uploader"
                  action="http://192.168.110.147:8081/putImg"
                  :show-file-list="false"
                  :on-success="handleSuccess2"
              >
                <img  :src="imgList[2]" class="avatar" style="width: 100px;height: 100px">
              </el-upload>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="联系人">
          <el-input v-model="alterData.contacts"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="alterData.mobile"></el-input>
        </el-form-item>
        <el-form-item label="区域">
          <el-input v-model="alterData.saddress"></el-input>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="alterData.site"></el-input>
        </el-form-item>
        <el-form-item label="运费">
          <el-input v-model="alterData.transportFee"></el-input>
        </el-form-item>
        <el-form-item label="开店时间">
          <el-input v-model="alterData.startTime"></el-input>
        </el-form-item>
        <el-form-item label="关店时间">
          <el-input v-model="alterData.endTime"></el-input>
        </el-form-item>


        <el-form-item label="状态">
          <el-radio-group v-model="alterData.status">
            <el-radio :label="0">申请中</el-radio>
            <el-radio :label="1">正常营业</el-radio>
            <el-radio :label="-1">店铺休息</el-radio>
            <el-radio :label="-2">店铺关闭</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-button type="primary" plain
                   style="width: 150px;height: 50px ;font-size: 25px;"
                   @click="alters">确定修改</el-button>

      </el-form>

    </el-dialog>
<!--    分页-->
    <el-pagination
        background
        layout="prev, pager, next"
        @current-change="page"
        :page-size="storePage.size"
        :total="storePage.total"
        style="margin-top: 10px;">
    </el-pagination>
  </div>
</template>

<script>
import as from "@/axios/axios";

export default {
name: "Shop",
  created() {
    this.communityGet()

  },
  data(){
    return {
      add:false,
      alter:false,
      storeInput:{name:"",status:"",},
      storePage:{total:1,pages:1,size:14},
      alterData: [{img:""}],
      storeData: [],
      imgList:[],
      imgLists:[],
      addData:{community:localStorage.getItem("community")},
      options: [
                {value: 1, label: '正常营业'},
                {value: -1, label: '休息'},
                {value: -2, label: '店铺关门'},
                {value: 0, label: '申请中'},
                {value: -3, label: '申请驳回'}],
      imgShow:true

    }
  },
  methods:{
    //添加店铺
    addStore(){
      this.addData.imglist = JSON.stringify(this.imgList)
      console.log(this.addData)
      as.post("/store/addStore",this.addData).then((res)=>{
        console.log(res)
        this.add = false
        this.imgList = []
        this.communityGet()
      })
    },
    //查询店铺
    communityGet(){
      as.post("/store/communityGetName",
          {community: localStorage.getItem("community"),
                name:this.storeInput.name,
                status:this.storeInput.status,
                current:this.storePage.pages,
                size:this.storePage.size,}).
      then((res)=>{
        console.log(res)
        this.storeData = res.data.data.records
        console.log(this.storeData)
        this.storePage.total = res.data.data.total
      })
    },

    //店铺状态
    status(row, column, cellValue, index){
      if(cellValue==1){
        return "正常营业"
      }else if(cellValue==0){
        return "店铺申请中"
      }else  if(cellValue == -3){
        return "店铺申请被驳回"
      }else if(cellValue == -1){
        return "店铺休息中"
      }else if(cellValue == -2){
        return "店铺关闭"
      }else {
        return ""
      }
    },
    //修改内容
    handleEdit(index,row){
      this.alterData = {...row}
      this.imgList = eval(row.imglist)
      console.log(this.imgList)
      this.alter = true
      console.log(this.alterData)
    },
    alters(){
      this.alterData.imglist  = JSON.stringify(this.imgList)
      as.post("/store/alter",this.alterData).then((res)=>{
        console.log(res)
        if(res.data.message=="修改成功"){
          this.$message({
            message: res.data.message,
            type: 'success'
          })
        }else {
          this.$message(res.data.message);
        }
        this.alterData={}
        this.alter = false
        this.communityGet()
      })

    },
    //取消修改
    alterClose(done){
      this.alterData = {}
      done()
    },
    addDataClose(done){
      console.log(this.addData)
      this.addData={community:localStorage.getItem("community")}
      console.log(this.addData)
      this.imgList = []
      this.imgLists = []
      done()
    },
    //查询
    onSubmit(){
      this.communityGet()
    },


    //跳转页面
    page(i){
      this.storePage.pages = i
      this.communityGet()
      console.log(i)
    },
    img(){
      return this.alterData.img
    },
    //店铺添加
    handleAvatarSuccess(res, file) {
      this.imgShow = false
      this.addData.img = res.name;
    },
    // 店铺图片添加
    handleSuccess0(res, file) {
        this.$set(this.imgList,0,res.name)
    },
    handleSuccess1(res, file) {
      this.$set(this.imgList,1,res.name)
    },
    handleSuccess2(res, file) {
      this.$set(this.imgList,2,res.name)
    },

    handleSuccess(res,file,fileList){
      console.log(file)

      this.imgList.push(res.name)

      console.log(this.imgList)
    },
    handleRemove(file, fileList) {
      let name  = file.response.name
      let index = this.imgList.indexOf(name)
      if(index > -1){
        this.imgList.splice(index,1)
      }
      console.log(this.imgList)
    },
    avatarSuccess(res,file){
      this.imgShow = false
      this.alterData.img = res.name
    }
  },

}

</script>

<style scoped>

</style>